<template>
  <div>
      <div class="popBox">
        <div class="text">提现到银行卡-智e</div>
        <div class="listBox">
          <div class="line">
            <div class="left">提现金额（元）</div>
            <div class="right">￥{{cost_money}}</div>
          </div>
          <div class="line">
            <div class="left">手续费（元）</div>
            <div class="right">￥{{poundageHj}}</div>
          </div>
          <div class="line">
            <div class="left">实际到账（元）</div>
            <div class="right">￥{{actual_amount}}</div>
          </div>
        </div>
        <div class="dline"></div>
        <div class="selectBank">
          <div class="top">
            <div class="topLeft">选择银行卡</div>
            <div class="topRight" @click="toAdd">添加银行卡</div>
          </div>
          <div class="contenBox">
            <van-radio-group v-model="radio">
              <van-radio :name="item.card" checked-color="#F51D1D" v-for="(item, index) in list" :key="index">{{ item.bank }} {{ item.card_type_name }} ({{ item.card.slice((item.card.length - 3), item.card.length) }})</van-radio>
            </van-radio-group>
          </div>
        </div>
      </div>
      <div class="btn" @click="confirm">确认提现</div>
  </div>
</template>
<script>
export default {
  //手续费:poundageHj,实际到账:actual_amount,提现金额:cost_money
  props: ["list","poundageHj","actual_amount","cost_money"],
  data() {
    return{
      radio: "",
    }
  },
  mounted(){
  },
  methods: {
    toAdd() {
      this.$router.push(this.fun.getUrl("addWisdomBank", {}));
    },
    confirm() {
      this.$emit("confirm", { radio: this.radio });
    }
  }
};
</script>
<style lang="scss" scoped>
.popBox {
  display: flex;
  flex-direction: column;
  height: 65vh;
  overflow: hidden;

  .text {
    line-height: 3rem;
    font-size: 1rem;
  }

  .dline {
    width: 100%;
    height: 0.625rem;
    background: #f7f7f7;
  }

  .selectBank {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border-radius: 0.3125rem;
    padding: 1.0313rem 0.8438rem;

    .contenBox {
      flex: 1;
      height: 100%;
      overflow-y: scroll;
      padding-top: 1.125rem;
      padding-bottom: 1rem;

      .van-radio {
        margin-bottom: 0.85rem;
      }
    }

    .top {
      flex-shrink: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .topRight {
        padding: 0.4688rem 0.5625rem;
        border-radius: 0.3125rem;
        border: 1px solid #f51d1d;
        color: #f51d1d;
      }
    }
  }

  .listBox {
    background: #fff;
    padding: 0 0.7813rem;

    .line {
      display: flex;
      justify-content: space-between;
      margin-bottom: 1.25rem;

      .left {
        font-size: 0.875rem;
        color: #949494;
      }

      .right {
        color: #949494;
        font-size: 0.875rem;
      }
    }
  }
}

.btn {
  height: 2.5rem;
  font-size: 1rem;
  font-weight: 400;
  color: #fff;
  background: #f51d1d;
  border-radius: 0.3125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  bottom: 1rem;
  width: 90%;
  left: 5%;
}
</style>